iT邦幫忙

0

Firebase * Realtime Database * Web * Writ

  • 分享至 

  • xImage
  •  

1. 創建 Firebase 專案

https://ithelp.ithome.com.tw/upload/images/20211118/20119922vyVPDOLMff.png

  • 步驟一:取個專案名稱
    https://ithelp.ithome.com.tw/upload/images/20211118/20119922qgpyumUHDE.png
  • 步驟二:啟用 Google Analytics
  • 步驟二:設定 Google Analytics 帳戶

2. 指定 Firebase 要跟你的哪個應用程式串,在這裡選網頁

https://ithelp.ithome.com.tw/upload/images/20211118/20119922la8HWknxTl.png

  • 為應用程式取個名字並且註冊應用程式,接著就可以獲得 SDK,選取 使用 <script> 標記 ,並按照提示把畫面提供的 script 程式都貼到 標記最下方處

3. 開啟 Realtime Database 資料庫

https://ithelp.ithome.com.tw/upload/images/20211118/20119922YLmeTYiakZ.png

  • 步驟一:選取資料位置:離台灣近點的地方即可
  • 步驟二:以測試模式啟動

4. 獲得 Realtime 的 Databse URL 及 資料節點

https://ithelp.ithome.com.tw/upload/images/20211119/20119922lHUzFA09hY.png

5. 將 DataBase URL 加入剛剛獲得的 firebaseConfig 下方:

https://ithelp.ithome.com.tw/upload/images/20211119/20119922vjmf1LdNJM.png

  • VS Code 長相
    https://ithelp.ithome.com.tw/upload/images/20211119/20119922dcG1qj61YG.png

6. 將資料寫入 Realtime 的資料節點下

在此可參考 Firebase 提供的文件
https://ithelp.ithome.com.tw/upload/images/20211119/20119922BXAJImBUBA.png

  • 要修改的地方是範例中有import { getDatabase, ref, set } from "firebase/database"把它改為 import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-database.js"
  • 加上呼叫 function 的 code
// 寫資料
    writeUserData("a", "b", "c", "d");
  • 重新整理 firebse 資料節點畫面
    https://ithelp.ithome.com.tw/upload/images/20211119/20119922DoNHrLwp1C.png

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言